<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-07-27 13:59:44
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-07-27 15:07:49
-->
<template>
  <div>
    <div class="wrapper">
      <p class="title">
        购物天堂
        <button class="fr" @click="showCart=!showCart">购物车{{cartData.length}}</button>
        <ul class="cartUl" v-show="showCart">
          <div v-if="cartData.length===0">购物车空空如也~</div>
          <template v-else>
            <li v-for="(item,index) in cartData"
              :key="item.name+index">
              {{item.name}}  {{item.price}}*{{item.count}}
              <button @click="remove(item)">删除</button>
            </li>
          </template>
          <p class="bugBtn"><button @click="buy">购买</button></p>
        </ul>
      </p>
      <ul class="goodsUl">
        <li
          v-for="(item,index) in allGood"
          :key="item.name+index">
          <div class="goodImg"></div>
          <div class="flexBox-r">
            <div class="flex1 shenlue">
              {{item.name}}
            </div>
            <div class="mg-lr10">￥{{item.price}}</div>
            <div class="hand" @click="add(item)">+</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      showCart: false,
      cartData: [],
      allGood: [
        {
          name: '香蕉',
          price: 3,
          count: 5,
        },
        {
          name: '菠萝-广西很甜甜的菠萝新鲜好吃喔',
          price: 2,
          count: 5,
        },
        {
          name: '葡萄',
          price: 8,
          count: 5,
        },
        {
          name: '西瓜',
          price: 2,
          count: 12,
        },
      ],
    };
  },
  methods: {
    buy() {
      // console.error('object');
      // 计算总价
      let money = 0;
      for (let i = 0; i < this.cartData.length; i += 1) {
        money += this.cartData[i].price * this.cartData[i].count;
      }
      alert(`总价${money}`);
    },
    remove(item) {
      // console.error('rm:', item);
      for (let i = 0; i < this.cartData.length; i += 1) {
        if (this.cartData[i].name === item.name) {
          if (this.cartData[i].count > 1) {
            this.cartData[i].count -= 1;
            break;
          } else {
            this.cartData.splice(i, 1);
            break;
          }
        }
      }
    },
    add(item) {
      // 循环购物车，如果存在就加1，否则新增一个商品
      let flag = false;
      for (let i = 0; i < this.cartData.length; i += 1) {
        if (this.cartData[i].name === item.name) {
          this.cartData[i].count += 1;
          flag = true;
          break;
        }
      }
      if (!flag) {
        // 深拷贝一下，避免对象污染
        const one = JSON.parse(JSON.stringify(item));
        one.count = 1;
        this.cartData.push(one);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  *{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .wrapper{width: 50%; margin: 50px auto;}
  .flexBox-r{display: flex;}
  .flex1{flex: 1;}
  .hand{cursor: pointer;}
  .shenlue{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .fr{float: right;}
  .title{position: relative; height: 30px; line-height: 30px;}
  .mg-lr10{margin-left: 10px; margin-right: 10px;}
  .goodsUl{display: flex; flex-wrap: wrap; width: 100%;
  border-top: 1px solid #ccc; padding-top: 8px;}
  .goodsUl li{
    width: 200px;
    margin-left: 8px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #eee;
  }
  .goodsUl .goodImg{
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }

  .cartUl{
    position: absolute;
    top: 30px;
    right: 0;
    height: 280px;
    width: 200px;
    overflow: auto;
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 5px 10px 30px;
  }
  .bugBtn{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
  .bugBtn button{width: 80%;}
</style>
